<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input v-model="data.orderNo" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入订单号"></el-input>
      <el-select placeholder="请选择订单状态" v-model="data.status" style="width: 240px; margin-right: 10px">
        <el-option label="已取消" value="已取消"></el-option>
        <el-option label="待支付" value="待支付"></el-option>
        <el-option label="待发货" value="待发货"></el-option>
        <el-option label="待签收" value="待签收"></el-option>
        <el-option label="已完成" value="已完成"></el-option>
      </el-select>
      <el-input v-model="data.name" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入普通用户的昵称"></el-input>
      <el-input v-model="data.petName" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入宠物名称"></el-input>
      <el-input v-model="data.shopName" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入宠物店名称" v-if="data.user.role === 'ADMIN' "></el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-table stripe :data="data.tableData">
        <el-table-column prop="orderNo" label="订单号"></el-table-column>
        <el-table-column prop="name" label="用户昵称"></el-table-column>
        <el-table-column prop="shopName" label="宠物店" v-if="data.user.role === 'ADMIN'"></el-table-column>
        <el-table-column prop="petName" label="宠物名称"></el-table-column>
        <el-table-column prop="petImage" label="宠物图片">
          <template #default="scope">
            <el-image style="width: 50px; height: 50px; border-radius: 5px" :src="scope.row.petImage" :preview-src-list="[scope.row.petImage]" preview-teleported></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="宠物价格"></el-table-column>
        <el-table-column prop="pickupName" label="收货人名称"></el-table-column>
        <el-table-column prop="pickupAddress" label="收货人地址"></el-table-column>
        <el-table-column prop="pickupPhone" label="收货人电话"></el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template v-slot="scope">
            <el-tag type="danger" v-if="scope.row.status === '已取消'">已取消</el-tag>
            <el-tag type="warning" v-if="scope.row.status === '待支付'">待支付</el-tag>
            <el-tag type="primary" v-if="scope.row.status === '待发货'">待发货</el-tag>
            <el-tag type="primary" v-if="scope.row.status === '待签收'">待签收</el-tag>
            <el-tag type="success" v-if="scope.row.status === '已完成'">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120" v-if=" data.user.role === 'PETSHOP' ">
          <template #default="scope">
            <el-button
                type="primary"
                size="small"
                :disabled="scope.row.status !== '待发货'"
                style="border-radius: 20px"
                @click="handleSend(scope.row.id)"
            >
              发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" v-if="data.total">
      <el-pagination
          @current-change="load"
          @size-change="handleSizeChange"
          background layout="total, prev, pager, next, jumper, sizes"
          :page-sizes="[1, 3, 5, 10, 15, 20, 30]"
          :page-size="data.pageSize"
          v-model:current-page="data.pageNum"
          :total="data.total"/>
    </div>

  </div>
</template>

<script setup>
  import {reactive} from 'vue'
  import request from '@/utils/request.js'
  import { ElMessage } from 'element-plus'

  const data = reactive({
    user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
    pageNum: 1,
    pageSize: 10,
    orderNo: null,
    status: null,
    userName: null,
    petName: null,
    shopName: null,
    tableData: [],
    total: 0
  })

  const load = () => {
    request.get('/petOrders/pageQuery', {
      params:{
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        orderNo: data.orderNo,
        status: data.status,
        name: data.name,
        petName: data.petName,
        shopName: data.shopName
      }
    }).then(res => {
      if (res.code === '200') {
        data.tableData = res.data?.list || []
        data.total = res.data?.total
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  const reset = () => {
    data.orderNo = null
    data.status = null,
    data.name = null
    data.petName = null
    data.shopName = null
    load()
  }

  const handleSizeChange = (newSize) => {
    data.pageSize = newSize
    data.pageNum = 1  // 切换页大小时重置到第一页
    load()
  }

  // 宠物店发货
  const handleSend = (id) => {
    request.put('/petOrders/send?id=' + id).then(res => {
      if (res.code === '200') {
        ElMessage.success('已发货')
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  load()
</script>